<div class="w-full max-w-3xl">
    <!-- Form -->
    <form [formGroup]="accountForm">
        <!-- Hidden ID Field -->
        <!-- Note: The 'id' field is disabled in the form group and not included in the save payload -->
        <!-- <input type="hidden" formControlName="id" /> --> <!-- ID is not part of the form group anymore -->

        <!-- Section -->
        <div class="w-full">
            <div class="text-3xl">Profile</div>
        </div>

        <div class="mt-8 grid w-full gap-6 sm:grid-cols-2 pb-2">
            <!-- Email Display (View Only) -->
            <div class="sm:col-span-1">
                <div class="text-gray-500 dark:text-gray-400">Email</div>
                <div class="font-medium">
                    {{ userProfile()?.email || 'Loading...' }}
                </div>
            </div>

            <div [formGroupName]="'chat'">
                <div class="sm:col-span-1">
                    <mat-form-field class="w-full">
                        <mat-label>Default Chat LLM</mat-label>
                        <mat-select formControlName="defaultLLM">
                            <!-- Use the llmsState signal directly -->
                            @let llmsApiResult = llmsState();
                            @switch (llmsApiResult.status) {
                                @case ('success') {
                                    @if (llmsApiResult.data && llmsApiResult.data.length > 0) {
                                        @for (llm of llmsApiResult.data; track llm.id) {
                                            <mat-option [value]="llm.id">
                                                {{ llm.name }}
                                            </mat-option>
                                        }
                                    } @else {
                                        <mat-option [value]="null" disabled>
                                            No LLMs available
                                        </mat-option>
                                    }
                                }
                                @case ('loading') {
                                    <mat-option [value]="null" disabled>Loading LLMs...</mat-option>
                                }
                                @case ('error') {
                                    <mat-option [value]="null" disabled>Error loading LLMs.</mat-option>
                                }
                                @case ('idle') {
                                    <mat-option [value]="null" disabled>LLMs not loaded yet.</mat-option>
                                }
                            }
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
        </div>

        <!-- Section -->
        <div class="w-full">
            <div class="text-xl">Default Human-in-the-Loop Settings</div>
        </div>
        <div class="mt-8 grid w-full gap-6 sm:grid-cols-2">
            <!-- HIL Budget -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Spend $USD</mat-label>
                    <input matInput type="number" formControlName="hilBudget" min="0" step="any" />
                </mat-form-field>
            </div>
            <!-- HIL Count -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Control Loop Iterations</mat-label>
                    <input matInput type="number" formControlName="hilCount" min="0" />
                </mat-form-field>
            </div>
        </div>

        <!-- Divider -->
        <div class="my-4 border-t"></div>

        <!-- Section -->
        <div class="w-full">
            <div class="text-3xl">LLM API Keys</div>
        </div>
        <div [formGroupName]="'llmConfig'" class="mt-8 grid w-full gap-4 sm:grid-cols-2">
            <!-- Anthropic -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Anthropic</mat-label>
                    <input matInput formControlName="anthropicKey" />
                </mat-form-field>
            </div>
            <!-- Cerebras -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Cerebras</mat-label>
                    <input matInput formControlName="cerebrasKey" />
                </mat-form-field>
            </div>
            <!-- DeepSeek -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>DeepSeek</mat-label>
                    <input matInput formControlName="deepseekKey" />
                </mat-form-field>
            </div>
            <!-- deepinfra -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>deepinfra</mat-label>
                    <input matInput formControlName="deepinfraKey" />
                </mat-form-field>
            </div>
            <!-- Fireworks -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Fireworks</mat-label>
                    <input matInput formControlName="fireworksKey" />
                </mat-form-field>
            </div>
            <!-- Gemini -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Gemini (AI Studio)</mat-label>
                    <input matInput formControlName="geminiKey" />
                </mat-form-field>
            </div>
            <!-- Groq -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Groq</mat-label>
                    <input matInput formControlName="groqKey" />
                </mat-form-field>
            </div>
            <!-- Nebius -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>Nebius</mat-label>
                    <input matInput formControlName="nebiusKey" />
                </mat-form-field>
            </div>
            <!-- OpenAI -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>OpenAI</mat-label>
                    <input matInput formControlName="openaiKey" />
                </mat-form-field>
            </div>
            <!-- OpenRouter -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>OpenRouter</mat-label>
                    <input matInput formControlName="openrouterKey" />
                </mat-form-field>
            </div>
            <!-- SambaNova -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>SambaNova</mat-label>
                    <input matInput formControlName="sambanovaKey" />
                </mat-form-field>
            </div>
            <!-- TogetherAI -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>TogetherAI</mat-label>
                    <input matInput formControlName="togetheraiKey" />
                </mat-form-field>
            </div>
            <!-- X.AI -->
            <div class="sm:col-span-1">
                <mat-form-field class="w-full">
                    <mat-label>X.AI</mat-label>
                    <input matInput formControlName="xaiKey" />
                </mat-form-field>
            </div>
        </div>

        <!-- Divider -->
        <div class="my-4 border-t"></div>

        <!-- Section -->
        <div class="w-full">
            <div class="text-3xl">Tool/Function Configurations</div>
        </div>
        <div [formGroupName]="'functionConfig'" class="mt-8">
            <!-- GitHub Configuration -->
            <div [formGroupName]="'GitHub'" class="mb-4">
                <div class="text-2xl pb-2">GitHub</div>
                <mat-form-field class="w-full">
                    <mat-label>Token</mat-label>
                    <input matInput formControlName="token" />
                </mat-form-field>
            </div>
            <!-- GitLab Configuration -->
            <div [formGroupName]="'GitLab'" class="mb-4">
                <div class="text-2xl pb-2">GitLab</div>
                <div class="grid gap-6 sm:grid-cols-3">
                    <!-- Host -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Domain</mat-label>
                            <input matInput formControlName="host" />
                        </mat-form-field>
                    </div>
                    <!-- Token -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Token</mat-label>
                            <input matInput formControlName="token" />
                        </mat-form-field>
                    </div>
                    <!-- Top Level Groups -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Top Level Groups (comma separated)</mat-label>
                            <input matInput formControlName="topLevelGroups" />
                        </mat-form-field>
                    </div>
                </div>
            </div>
            <!-- Jira Configuration -->
            <div [formGroupName]="'Jira'" class="mb-4">
                <div class="text-2xl pb-2">Jira</div>
                <div class="grid gap-6 sm:grid-cols-3">
                    <!-- Base URL -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Base URL</mat-label>
                            <input matInput formControlName="baseUrl" />
                        </mat-form-field>
                    </div>
                    <!-- Email -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Email</mat-label>
                            <input matInput formControlName="email" type="email" />
                        </mat-form-field>
                    </div>
                    <!-- Token -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Token</mat-label>
                            <input matInput formControlName="token" />
                        </mat-form-field>
                    </div>
                </div>
            </div>
            <!-- Slack Configuration -->
            <div [formGroupName]="'Slack'" class="mb-4">
                <div class="text-2xl pb-2">Slack</div>
                <div class="grid gap-6 sm:grid-cols-3">
                    <!-- Token -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Token</mat-label>
                            <input matInput formControlName="token" />
                        </mat-form-field>
                    </div>
                    <!-- User ID -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>User ID</mat-label>
                            <input matInput formControlName="userId" />
                        </mat-form-field>
                    </div>
                    <!-- Webhook URL -->
                    <div class="sm:col-span-1">
                        <mat-form-field class="w-full">
                            <mat-label>Webhook URL</mat-label>
                            <input matInput formControlName="webhookUrl" />
                        </mat-form-field>
                    </div>
                </div>
            </div>
            <!-- Perplexity Configuration -->
            <div [formGroupName]="'Perplexity'" class="mb-4">
                <div class="text-2xl pb-2">Perplexity</div>
                <mat-form-field class="w-full">
                    <mat-label>Key</mat-label>
                    <input matInput formControlName="key" />
                </mat-form-field>
            </div>
        </div>

        <!-- Divider -->
        <div class="mb-6 mt-11 border-t"></div>

        <!-- Actions -->
        <div class="flex items-center justify-end">
            <button mat-stroked-button type="button" (click)="onCancel()">Cancel</button>
            <button
                class="ml-4"
                mat-flat-button
                type="button"
                [color]="'primary'"
                (click)="onSave()"
                [disabled]="accountForm.invalid || accountForm.pristine"
            >
                Save
            </button>
        </div>
    </form>
</div>
